<template>
  <el-dialog :title=title1 width="600" v-model="visible"
             :close-on-click-modal="false" :destroy-on-close="true" draggable>
    <el-form ref="menuDialogFormRef" :model="state.ruleForm" :rules="dataRules" label-width="90px" v-loading="loading">
      <el-form-item label="选择楼宇" prop="buildingId">
        <el-select v-model="state.ruleForm.buildingId" @change="getUnit">
          <el-option v-for="build in buildingList" :key="build.buildingId" :label="build.buildingName" :value="build.buildingId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择单元" prop="unitId">
        <el-select v-model="state.ruleForm.unitId" @change="getFloor">
          <el-option v-for="unit in unitList" :key="unit.unitId" :label="unit.unitName" :value="unit.unitId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼层" prop="floorNumber">
        <el-input v-model="state.ruleForm.floorNumber" clearable placeholder="请输入楼层"></el-input>
      </el-form-item>
      <el-form-item label="楼层名称" prop="floorName">
        <el-input v-model="state.ruleForm.floorName" clearable placeholder="请输入楼层名称" />
      </el-form-item>
      <el-form-item label="备注" prop="remark" >
        <el-input v-model="state.ruleForm.remark" maxlength="500" placeholder="请输入备注"/>
      </el-form-item>
    </el-form>
    <template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
			</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="propertyRoomDialog">
import { addRoom, updateRoom, getRoom, getBuildingList, getUnitList, getFloorList } from "/@/api/room/room";
import { addFloor, updateFloor, getFloor } from "/@/api/floor/floor";
import {useMessage} from '/@/hooks/message';
import { useDict } from "/@/hooks/dict";
import { onMounted } from "vue";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 引入组件
const IconSelector = defineAsyncComponent(() => import('/@/components/IconSelector/index.vue'));
//引入字典
const { property_room_purpose } = useDict('property_room_purpose');


// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const menuDialogFormRef = ref();
const title1 = ref('');
const buildingList = ref([]);
const unitList = ref([]);
const floorList = ref([]);
// 定义需要的数据
const state = reactive({
  ruleForm: {
    floorId: '',
    floorNumber: '',
    floorName: '',
    unitId: '',
    unitName: '',
    buildingId: '',
    buildingName: '',
    remark: '',
  },
  parentData: [] as any[], // 上级菜单数据
});

onMounted(() => {
  getBuilding();
});

// 表单校验规则
const dataRules = reactive({
  buildingId: [{required: true, message: '楼宇不能为空', trigger: 'blur'}],
  unitId: [{required: true, message: '单元不能为空', trigger: 'blur'}],
  floorId: [{required: true, message: '楼层不能为空', trigger: 'blur'}],
  floorNumber: [{required: true, message: '楼层不能为空', trigger: 'blur'}],
  floorName: [{required: true, message: '楼层名称不能为空', trigger: 'blur'}],
  remark: [{required: true, message: '备注不能为空', trigger: 'blur'}],
});

// 打开弹窗
const openDialog = async (title: string, row?: any) => {
  visible.value = true;
  title1.value = title;
  nextTick(() => {
    Object.assign(state.ruleForm, {
      floorId: '',
      floorNumber: '',
      floorName: '',
      unitId: '',
      unitName: '',
      buildingId: '',
      buildingName: '',
      remark: '',
    });
    unitList.value = [];
  });

  if (row?.floorId) {
    state.ruleForm.floorId = row.floorId;
    // 获取当前节点菜单信息
    let floorData = await getFloor(row.floorId);
    Object.assign(state.ruleForm, floorData.data);

    // 如果有楼宇ID，获取单元列表
    if (state.ruleForm.buildingId) {
      let unitRes = await getUnitList(state.ruleForm.buildingId);
      unitList.value = unitRes.data.data;
    }
  }
};

const getBuilding = async () => {
  let res = await getBuildingList();
  buildingList.value = res.data.data;
};

const getUnit = async (buildingId: number) => {
  let res = await getUnitList(buildingId);
  unitList.value = res.data.data;
};

// 保存数据
const onSubmit = async () => {
  const valid = await menuDialogFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
    loading.value = true;
    state.ruleForm.floorId ? await updateFloor(state.ruleForm) : await addFloor(state.ruleForm);
    useMessage().success((state.ruleForm.floorId ? '修改成功' : '新增成功'));
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
  openDialog,
});
</script>
